<template>
  <div class="wrapper">
    <div
      class="content"
      v-for="item in list"
      :key="item.id"
      @click="toDetail(item)"
    >
      <div class="left">
        <image class="img" :src="item.shopLogo"></image>
      </div>
      <div class="right">
        <div class="top">
          <span class="shop-name">商户名称: {{ item.shopName || '' }}</span>
          <span style="color:rgb(182, 180, 180);">></span>
          <span>￥ {{ item.amount }}元</span>
        </div>
        <div class="order">订单号: {{ item.id }}</div>
        <div class="time">
          <span>时间: {{ item.payTime }}</span>
        </div>
        <div class="remark">
          <span>备注: {{ item.remark2 || '无' }}</span>
        </div>
      </div>
    </div>
    <div class="line"></div>
  </div>
</template>

<script>
import { getOrder } from '@/api'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      list: [],
      page: 1,
      size: 6,
      total: ''
    }
  },
  onReachBottom() {
    if (this.total != this.list.length) {
      this.page++
      this.getOrders()
    }
  },
  created() {
    this.getOrders()
  },
  methods: {
    toDetail(item) {
      uni.navigateTo({
        url:
          '/pages/package/member-center/component/order-detail?content=' +
          JSON.stringify(item)
      })
    },
    getOrders() {
      getOrder(this.openId, this.page, this.size).then(res => {
        this.total = res.data.count
        this.list = [...this.list, ...res.data.orders]
      })
    }
  },
  computed: {
    ...mapState(['openId'])
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  padding: 0 10rpx;
  .content {
    display: flex;
    height: 260rpx;
    align-items: center;
    color: rgb(182, 180, 180);
    border-bottom: 1px solid rgba(221, 218, 218, 0.39);
    .left {
      width: 220rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 160rpx;
        height: 160rpx;
      }
    }
    .top {
      flex: 1;
      display: flex;
      justify-content: space-between;
      padding-bottom: 20rpx;
      color: #000;
      .shop-name {
        font-weight: 600;
        font-size: 32rpx;
      }
    }
  }
  .line {
    width: 100%;
    height: 1rpx;
    background: rgb(218, 216, 216);
  }
}
</style>
